<template>
  <div>
    <table class="table table-borderd">
      <tr>
        <td align="right">用户名:</td>
        <td><input type="text" v-model="state.userName" /></td>
      </tr>
      <tr>
        <td align="right">密码：</td>
        <td><input type="password" v-model="state.userPwd" /></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input
            @click="login"
            type="button"
            value="注册"
            class="btn btn-success"
          />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
//路由器
const router = useRouter();

//定义数据
// let userName = ref('');
// let userPwd = ref('');

let data = reactive({
  state: {
    userName: '',
    userPwd: ''
  }
});

let { state } = toRefs(data);
const login = () => {
  //1.判断非空

  let reg = /^[a-zA-Z]\w{5,15}$/;

  if (state.value.userName == '') {
    alert('用户名不能为空');
    return;
  }
  if (state.value.userPwd == '') {
    alert('密码不能为空');
    return;
  }
  //密码由英文字母，下划线组成6-16位 不能以数字开头

  if (reg.test(state.value.userPwd) == false) {
    alert('密码由英文字母，下划线组成6-16位 不能以数字开头');
    return;
  }

  //2.发送网络请求
  axios({
    url: '/api/Users/PostRegisterUser',
    method: 'post',
    data: {
      UL_Name: state.value.userName,
      UL_Pwd: state.value.userPwd
    }
  })
    .then((res) => {
      console.log(res);
      if (res.data.data > 0) {
        alert('注册成功');
        router.push('/login');
      } else if (res.data.data == -1) {
        alert('用户名重复');
        return;
      } else {
        alert('注册失败');
        return;
      }
    })
    .catch((err) => {
      //请求失败处理
      console.log(err);
    });
};
</script>

<style scoped></style>
